<template>
    <div v-loading="loading">
        <keyHeader ref="keyHeader" :data="data" :keyType="keyType"></keyHeader>
        <div class="addNewLine-btn"><el-button type="primary" @click="editDialogVisible=true;editFormParam={}">{{$t('publicFeedback.addNewLine')}}</el-button></div>
        <el-table :data="hashList" border style="width: 100%" class="redisDataTable">
            <el-table-column type="index" label="index" width="180"> </el-table-column>
            <el-table-column label="key" prop="key" width="180"></el-table-column>
            <el-table-column label="value" prop="value">
                <!-- elementUi渲染性能问题此处不展示全部的数据(数据量过大卡到爆炸) -->
                <template slot-scope="scope">
                    <el-popover placement="top-start" trigger="hover" width="400" :content="scope.row.value.substring(0,500)+'...'">
                        <span slot="reference" style='white-space: nowrap;overflow: hidden;text-overflow: ellipsis;'>{{scope.row.value.substring(0,200)}}</span>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column>   
                <template slot="header" slot-scope="scope">
                    <el-input v-model="searchTxt" size="mini" @keyup.enter.native="search(searchTxt)" :placeholder="$t('aside.PleaseEnter')+'('+$t('publicFeedback.EnterKeyStartSreach')+')'"/>
                </template>
                <template slot-scope="scope">
                    <el-button type="warning" icon="el-icon-edit" circle  size="small" @click="editLineClick(scope)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" circle  size="small" @click="delItem(scope)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="loadMore">
            <el-button :disabled="loadDoNone" @click="loadMore">{{$t('aside.loadMore')}}</el-button>
        </div>
        <!-- 编辑弹框 -->
        <editHashLineDialog :editDialogVisible="editDialogVisible" :editFormParam="editFormParam" 
        @hideDialog="editDialogVisible=false" @saveHash="editHashLine"></editHashLineDialog>
    </div>
</template>
<script>
import  keyHeader from './keyHeader'
import editHashLineDialog from '@/components/dialog/editHashLineDialog'
export default {
    components:{
        keyHeader,editHashLineDialog
    },
    props:["data","keyType"],
    data(){
        return {
            options:{
                match:"*",
                count:200
            },
            searchTxt:"",
            hashList:[],
            editDialogVisible:false,
            editFormParam:{},
            stream:{},
            loadDoNone:false,
            PausePoint:0,
            loading:true
        }
    },
    created(){
        this.init();
    },
    methods:{
        init(){
           this.refushHashList();
        },
        //刷新列表
        refushHashList(){
            var self=this
            self.hashList=[]
            self.loading=true
            let stream=this.data.redisClient.hscanStream(this.data.key,this.options);
            this.stream=stream
            //数据加载
            stream.on('data',function(list){
                let hashList=[];
                for (let i = 0; i < list.length; i += 2) {
                    hashList.push({
                        key: list[i],
                        value: list[i+1]
                    });
                }
                self.hashList=self.hashList.concat(hashList)
                self.PausePoint+=hashList.length
                //每满足200+以上则暂停
                if(self.PausePoint>=self.options.count){
                    stream.pause()
                    self.loading=false
                    self.PausePoint=0
                }
            })
            //数据加载完毕
            stream.on('end',function(){
                self.loadDoNone=true
                self.stream=null
                self.loading=false
            })
        },
        //搜索
        search(searchTxt){
            this.options.match=searchTxt==="*"?"*":"*"+searchTxt+"*"
            this.refushHashList();
        },
        //删除一行数据
        delItem(scope){
            this.$confirm(this.$t("publicFeedback.delLineTips"),this.$t("aside.tips"),{
                confirmButtonText: this.$t('aside.determine'),
                cancelButtonText: this.$t('aside.cancel'),
                cancelButtonClass: "btn-custom-cancel",
                type: 'warning'
            }).then(()=>{
                this.data.redisClient.hdel(this.data.key,scope.row.key).then((res)=>{
                    if(res===1){
                        this.hashList.splice(scope.$index,1)
                    }
                    this.$message.success({
                        message:this.$t('publicFeedback.delSuccess')
                    })
                }).catch((e)=>{
                    this.$message.error({
                        message:e.message
                    })
                })
            }).catch(()=>{})
        },
        //编辑行点击事件
        editLineClick(scope){
            this.editFormParam=scope
            this.editDialogVisible=true
        },
        //添加一行
        addLine(data){
            this.hashList.push({
                key: data.key,
                value: data.value
            });
        },
        //编辑一行
        editHashLine(data){
            this.data.redisClient.hset(this.data.key,data.key,data.value).then((res)=>{
                //这是添加一行
                if(res===1){
                    //添加一行
                    this.addLine(data)
                }
                if(this.data.type==="addKey"){
                    this.$eventBus.$emit("refushKeyList",{client:this.data.redisClient,type:"add",key:this.data.key})
                    this.$eventBus.$emit("reloadKeyWindow",{client:this.data.redisClient})
                    this.$refs.keyHeader.init();
                }
                this.$message.success({
                    message:this.$t('publicFeedback.saveSuccess')
                })
                this.editDialogVisible=false
            }).catch((e)=>{
                this.$message.error({
                    message:e.message
                })
            })
        },
        //加载更多
        loadMore(){
            this.stream.resume();
        }
    },
    watch:{
        data(newValue,oldValue){
            this.init()
        }
    }
}
</script>